<template>
  <div class = "rank">
    <scroll class="scroll-wrapper">
      <ul class = "content">
        <li class = "item"
            v-for = "(item,index) in data"
            :key = "index"
            @click = "toRankDetail(item)">
          <div class = "img">
            <img :src = "item.picUrl">
          </div>
          <ul class = "rank-list">
            <li class = "rank-item" v-for = "(song,rank) in item.songList" :key = "rank">
              <span>{{rank + 1}}. </span>
              <h1>{{ song.songname }}-{{song.singername}}</h1>
            </li>
          </ul>
        </li>
      </ul>
    </scroll>
    <!-- component render-->
    <router-view></router-view>
  </div>

</template>

<script>
    import {getRank} from "@/api/rank";
    import Scroll from "@/base/scroll/Scroll";

    export default {
        name: "Rank",
        components: {Scroll},
        mounted() {
            this._getRank()
        },
        data() {
            return {
                data: []
            }
        },
        methods: {
            async _getRank() {
                this.data = await getRank()
            },
            toRankDetail(item){
                this.$router.push({
                    name: 'rank-detail',
                    params: item
                })
            }
        }
    }
</script>

<style scoped lang = "stylus">
  @import "~common/stylus/variable"

  .rank
    height 100%
    .scroll-wrapper
      height 100%
      .content
        .item
          overflow hidden
          padding 10px 30px
          display flex
          .img
            width 80px
            height 80px
            background lightseagreen
            img
              width 100%
              height 100%

          .rank-list
            flex 1
            display flex
            flex-direction column
            height 80px
            background $color-highlight-background
            justify-content space-evenly
            padding-left 50px
            overflow hidden
            .rank-item
              font-size $font-size-small
              color $color-text-l
              overflow hidden
              text-overflow ellipsis
              white-space nowrap
              h1
                display inline

</style>
